<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.css" />
</head>

<body style="padding: 15px">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">图书表格</h3>
    </div>
    <div class="panel-body form-inline">
      <form id="bookForm">
        <div class="input-group">
          <div class="input-group-addon">书名</div>
          <input type="text" class="form-control" name="bookname" placeholder="请输入书名" />
        </div>
        <div class="input-group">
          <div class="input-group-addon">作者</div>
          <input type="text" class="form-control" name="author" placeholder="请输入作者" />
        </div>
        <div class="input-group">
          <div class="input-group-addon">出版社</div>
          <input type="text" class="form-control" name="publisher" placeholder="请输入出版社" />
        </div>
        <button id="btnAdd" class="btn btn-primary">添加</button>
        <button id="btnAnd" class="btn btn-primary" type="button">搜索</button>
    </div>
    </form>
  </div>

  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
        
      </tr>
    </thead>
    <tbody id="tb">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td><a href="#" data-id="1"> 删除</a></td>
      </tr>
    </tbody>
  </table>
  <script src="./lib/form-serialize.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./js/indx.js03.js"></script>
  <!-- <script src="./js/index.js"></script> -->
  <!-- <script>
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'
const  tb= document.querySelector('#tb');
    const goodlist=()=>{
      axios.get('/api/getbooks').then(({data:res})=>{
        const{data}=res
        console.log(res)
        const html=data.map(item=>{
          return `<tr>
         <td>${item.id}</td>
         <td>${item.bookname}</td>
         <td>${item.author}</td>
         <td>${item.publisher}</td>
         <td><a href="#" data-id="${item.id}">删除</a></td>
       </tr>`
        }).join('')
        tb.innerHTML=html

      })
    }
   goodlist ()
  //  添加图书
  const form = document.querySelector('#bookForm');
  form.addEventListener('submit',function(e){
    e.preventDefault()
    const data=serialize (form,{hash:true})
    console.log(data)
    axios.post('/api/addbook',data).then(({data:res})=>{
   alert (res.msg)
   if (res.status !== 201) return
   form.reset()
   goodlist ()
    })
  })
  // 删除图书
     tb.addEventListener('click',function(e){
          if(e.target.tagName==='A'){
            let id = e.target.dataset.id
        axios.get('/api/delbook?id=' + id).then(({data:res})=>{
          console.log(res)
          alert ('删除成功')
          goodlist ()
        })
          }
     })
    //  筛选
    const btn = document.querySelector('#btnAnd');
    btn.addEventListener('click',function(){
      const data=serialize(form,{hash:true})
      const bookname=data.bookname
      const author= data.author
      const publisher = data.publisher
      axios({
        url:'/api/getbooks',
        method:'GET',
        params:{
          bookname,
          author,
          publisher
        }
      }).then(({data:res})=>{
        const{data}=res
        console.log(res)
        const html=data.map(item=>{
          return `<tr>
         <td>${item.id}</td>
         <td>${item.bookname}</td>
         <td>${item.author}</td>
         <td>${item.publisher}</td>
         <td><a href="#" data-id="${item.id}">删除</a></td>
       </tr>`
        }).join('')
        tb.innerHTML=html
      })

    })
    </script> -->
</body>
  
</html> 